<template>
 <div class="HomeEquip">
    <el-container class="app-wrapper">
      <div style="height: 100%;position:absolute;top:0px;">
        <router-view/>
      </div>
      <el-header height="50px">
        <navbar></navbar>
      </el-header>
      <el-aside width="180px">
        <SidebarEquip></SidebarEquip>
      </el-aside>
    </el-container>
 </div>
</template>
<script>
import Navbar from './child/Navbar'
import SidebarEquip from './child/sidebarEquip'
export default {
  name: 'HomeEquip',
  data () {
    return {}
  },
  components: {
    Navbar,
    SidebarEquip
  }
}
</script>

 <style lang="scss" scoped>
.HomeEquip {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
$container_bg_dark: #262626;
.app-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .el-aside {
    height: 100%;
    position: absolute;
    left: 30px;
    // background-color: aqua;
  }
  .el-header {
    position: fixed;
    height: 50px;
    background:rgba($color: $container_bg_dark, $alpha: 1.0);
    color: #fff;
    width: 100%;
    // background-color: saddlebrown;
    z-index: 1;
  }
}

</style>
